
import React, { Component } from 'react'
import { connect } from 'react-redux'
// import { Link } from 'react-router'
// 引入 ECharts 主模块
// import echarts from 'echarts'
const echarts = require('echarts/lib/echarts');
// // 引入柱状图
require('echarts/lib/chart/bar');
// require('echarts/lib/chart/pie');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/chart/pictorialBar');

// 颜色
const lightBlue = {
  type: 'linear',
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [{
    offset: 0,
    color: 'rgba(41, 121, 255, 1)', // 0% 处的颜色
  }, {
    offset: 1,
    color: 'rgba(0, 192, 255, 1)', // 100% 处的颜色
  }],
  globalCoord: false, // 缺省为 false
}
// 纹理
const piePane = ''
const piePatternImg = new Image();
piePatternImg.src = piePane;
// 图标
const cpu = 'image://'
const memory = 'image://'
const disk = 'image://'

@connect((state, props) => ({
  config: state.config,
}))
export default class app extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // data: {},
    }
  }

  componentDidMount() {
    // this.loadChart()
    setTimeout(() => {
      this.loadChart()
    }, 500)
  }

  loadChart() {
    // console.log(this.chart)
    this.chartObj = echarts.init(this.chart)
    const option = {
      tooltip: {
        show: false,
      },
      grid: {
        top: '20%',
        left: '5%',
        right: '5%',
        bottom: '15%',
      },
      xAxis: {
        data: ['平均CPU\n利用率', '平均内存\n利用率', '平均硬盘\n利用率'],
        offset: 15,
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: '#fff',
          fontSize: 14,
        },
      },
      yAxis: {
        min: 0,
        max: 100,
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
      },
      series: [{
        type: 'bar',
        label: {
          show: true,
          position: 'top',
          padding: 10,
          color: '#2979ff',
          fontSize: 14,
          formatter: '{c}%',
        },
        itemStyle: {
          color: lightBlue,
        },
        barWidth: '40%',
        data: [49, 80, 67],
        z: 10,
      }, {
        type: 'bar',
        barGap: '-100%',
        itemStyle: {
          color: {
            image: piePatternImg,
            repeat: 'repeat',
          },
          opacity: 0.05,
        },
        barWidth: '40%',

        data: [100, 100, 100],
        z: 5,
      }, {
        type: 'bar',
        barGap: '-100%',
        itemStyle: {
          color: '#536dfe',
          opacity: 0.2,
        },
        barWidth: '40%',

        data: [100, 100, 100],
        z: 5,
      }, {
        name: 'glyph',
        type: 'pictorialBar',
        barGap: '-100%',
        symbolPosition: 'end',
        symbolSize: 64,
        symbolOffset: [0, '-150%'],
        data: [{
          value: 100,
          symbol: cpu,
        }, {
          value: 100,
          symbol: memory,
        }, {
          value: 100,
          symbol: disk,
        }],
      }],
      backgroundColor: '#190c12',
    }
    this.chartObj.setOption(option)
  }

  render() {
    return (
      <div className="page">
        <div className="page" ref={c => this.chart = c} />
      </div>
    )
  }
}
